var oMark = document.getElementById('rotate-mark');
var oPic = document.getElementById('rotate-pic');
var oImg = oPic.getElementsByTagName('img');

var index = 0;

oMark.onmouseover = function()
{
    this.style.cursor = 'move';
    document.onmousedown = function(e)
    {
        var downX = e.offsetX;
        document.onmousemove = function(ev)
        {
            var moveX = ev.offsetX;
            var x = moveX - downX;
            if(x>40){
                downX = moveX;
                if(index<=0){
                    index = oImg.length-1;
                }else{
                    index--;
                }
                for(var i=0; i<oImg.length; i++){
                    oImg[i].style.display = 'none';
                }
                oImg[index].style.display = 'block';
            }
            if(x<-40){
                downX = moveX;
                if(index>=oImg.length-1){
                    index = 0
                }else{
                    index++;
                }
                for(var i=0; i<oImg.length; i++){
                    oImg[i].style.display = 'none';
                }
                oImg[index].style.display = 'block';
            }
        }
    }
    document.onmouseup = function()
    {
        document.onmousemove = null;
    }
}